<template>
  <!-- 添加面包屑导航 -->
  <MyBreadcrumb :item1="item1" :item2="item2"></MyBreadcrumb>

  <el-card class="box-card">
    <el-row>
      <el-col :span="24">
        <el-table :data="userList" border stripe style="width: 100%">
          <el-table-column prop="id" label="编号" width="180"/>
          <el-table-column prop="username" label="用户名" width="180"/>
          <el-table-column prop="email" label="邮箱"/>
          <el-table-column prop="phone" label="手机号"/>
          <el-table-column prop="question" label="问题"/>
          <el-table-column prop="answer" label="答案"/>
          <el-table-column label="角色">
            <template #default="scope">
              <span v-if="scope.row.role === 0">管理员</span>
              <span v-else>普通用户</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建日期"/>
          <el-table-column prop="updateTime" label="修改日期"/>
        </el-table>

        <el-pagination
            v-model:current-page="queryInfo.currentPage"
            v-model:page-size="queryInfo.pageSize"
            :page-sizes="[2, 3, 4, 5]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
  </el-card>
</template>

<script>

import MyBreadcrumb from "../../components/MyBreadcrumb.vue";

import { getCurrentInstance, onMounted } from "vue";

// 导入api
import { getUsers } from "../../api/user.js";

export default {
  name: "User",
  components: {
    MyBreadcrumb
  },
  methods: {
    // 加载用户数据
    async loadUserData(){
      const {data: ret} = await getUsers(this.queryInfo);
      console.log(ret);
      if (ret['code'] == 200) {
        // 成功
        // this.userList = ret['data'];
        // 挨个赋值
        this.total = ret['data']['total'];
        this.userList = ret['data']['userList']
      }
    },
    handleSizeChange(val){
      console.log(val);
      // 修改页大小的值
      this.queryInfo.pageSize = val;
      // 重新获取数据
      this.loadUserData();
    },
    handleCurrentChange(val){
      console.log(val);
      this.queryInfo.currentPage = val; // 修改当前页
      // 重新获取数据
      this.loadUserData();
    }
  },
  setup(){
    const {ctx} = getCurrentInstance();
    onMounted(() => {
      ctx.loadUserData();
    });
  },
  data() {
    return {
      queryInfo: {
        currentPage: 1,
        pageSize: 2
      },
      total: 0,
      item1: '用户管理',
      item2: "用户列表",
      userList: [
          {
            id: 1,
            username: "admin",
            email: "admin@happymall.com",
            phone: "13800138000",
            question: "问题",
            answer: "答案",
            role: 0,
            createTime: "2016-11-06 08:56:45",
            updateTime: "2017-04-04 11:27:36"
          }
        ]
    }
  }
}
</script>

<style scoped>
.box-card {
  margin-top: 15px;
  width: 100%;
}
</style>